<template>
	<tm-fullView>
		<view>
			<tm-menubars  title="倒计时" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
			
			<tm-sheet :shadow="24" color="primary">
				<view class="text-size-s text-weight-b mb-24">默认</view>
				<tm-countdown :autoStart="false" :time="24*60*60*1000"></tm-countdown>
				<view class="text-size-s text-weight-b my-24">自定义格式</view>
				<tm-countdown :autoStart="false" format="DD天狗HH时MM分数SS秒哈"  :time="24*60*60*1000"></tm-countdown>
			</tm-sheet>
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b my-24">时间精确到毫秒</view>
				<tm-countdown  ref="testCountdown"  :time="24*60*60*1000">
					<template 
					v-slot:default=" { timeData } ">
						<view class="flex-center">
							<view v-for="(item,key) in timeData.data" :key="key" class="pa-10 primary  mr-10 round-2" :class="$tm.vx.state().tmVuetify.black?'bk':''">
								{{item}}
							</view>
						</view>
					</template> 
				</tm-countdown>
				<view style="height: 36upx;"></view>
				<tm-button @click="$refs.testCountdown.pause()" size="m" font-color="black" theme="white" :shadow="0" text icon="icon-pausecircle">暂停</tm-button>
				<tm-button @click="$refs.testCountdown.start()" size="m" font-color="black" theme="white" :shadow="0" text icon="icon-playcircle">继续/开始</tm-button>
				<tm-button @click="$refs.testCountdown.stop()" size="m" font-color="black" theme="white" :shadow="0" text icon="icon-stopcircle">结束</tm-button>
				<tm-button @click="$refs.testCountdown.resinit()" size="m" font-color="black" theme="white" :shadow="0" text icon="icon-redo">重置</tm-button>
			</tm-sheet>
		</view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmCountdown from "@/tm-vuetify/components/tm-countdown/tm-countdown.vue"
	

	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmCountdown},
		data() {
			return {
				
			};
		},
		methods: {
			
		},
	}
</script>

<style lang="less">

</style>
